<template>
	<swiper :circular="false" :vertical="true" class="swiper-container" :current="current" @change="handleSwiperChange">
		<swiper-item class="swiper-item" v-for="(item,index) in person_dataset" :key="index">
			<swiperItemView :someone_dataset="item" />
		</swiper-item>
	</swiper>
</template>

<script>
	import swiperItemView from "../swiperItemView/swiperItemView.vue"
	export default {
		components: {
			swiperItemView
		},
		data() {
			return {
				// 页面人物数据	控制在三个list	中间的list为首播
				person_dataset: [{
					idName: 'person01',
					name: '',
					brief_introduction: '',
					label01: '人大人青年同学会',
					label02: '人大人校友',
					address: '上海市',
					fabulous: 666,
					collection: 50,
					share: 46,
					comment: 0,
					portraitPic: '/static/logo.png',
					videoPic: 'http://vjs.zencdn.net/v/oceans.mp4'
				}, {
					idName: 'person02',
					name: '张三',
					brief_introduction: '本科 | 北京师范大学海珠校区',
					label01: '',
					label02: '回忆',
					address: '广州市',
					fabulous: 2,
					collection: 6,
					share: 3,
					comment: 0,
					portraitPic: '/static/logo.png',
					videoPic: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bdb24c6d-8c19-4f80-8e7e-c9c9f037f131/c9735d4e-bec5-441e-ae67-2905542eff97.mp4'
				}, {
					idName: 'person03',
					name: '名字',
					brief_introduction: '家教 | 1年 | 本科',
					label01: '',
					label02: '财务实习生面试',
					address: '广州市',
					fabulous: 0,
					collection: 1,
					share: 1,
					comment: 0,
					portraitPic: '/static/logo.png',
					videoPic: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bdb24c6d-8c19-4f80-8e7e-c9c9f037f131/4c71aeba-d652-411e-9882-73dd0263e851.mp4'
				}],
				current: 0
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				uni.request({
					url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
					method: 'POST',
					data: {
						info: 'get_video'
					},
					success: (res) => {
						var msg = res.data.data
						// console.log(msg);
						// this.person_dataset = msg
						for (let i = 0; i < msg.length; i++) {
							this.person_dataset.push({
								idName: 'persons' + i,
								name: '',
								brief_introduction: '',
								label01: '青年同学会',
								label02: '人大人校友',
								address: msg[i].msg,
								fabulous: 666,
								collection: 50,
								share: 46,
								comment: 0,
								portraitPic: '/static/logo.png',
								videoPic: msg[i].src
							})
						}
					}
				})
			},
			handleSwiperChange(e) {
				this.current = e.detail.current
				let videoContextArr = this.$store.state.videoContextArr
				let videoContext = videoContextArr.filter((item, index) => {
					if (Math.abs(this.current - index) >= 2) {
						item.seek(0)
					}
					item.pause()
					return index == this.current
				})
				videoContext[0].play()
				this.$store.commit('saveCurrentVideoContext', videoContext[0])
			}
		}
	}
</script>

<style lang="scss">
	.swiper-container {
		width: 100%;
		height: 100%;
	}
</style>